feat(core): app menu waffle launcher by pringelmann · Pull Request #60180 · nextcloud/server

pringelmann · 2026-05-06T08:11:51Z

Resolves: App navigation: waffle menu and header layout #59948

Summary

First pass at the waffle launcher behind the apps icon in the header. Opening it shows a 4-wide grid of installed apps in a popover; admins also see a "More apps" tile linking to the app store. The existing current-app button is kept as a second trigger for the same popover.

Preview link

What's in:

Popover grid replaces the old hamburger overlay
Roving tabindex keyboard nav (arrow keys, Home/End, Enter/Space)
Focus returns to whichever trigger opened the popover
RTL-aware horizontal alignment
Admin-only "More apps" tile
Unit + Cypress coverage

TODO

Follow-ups for later PRs:

Live unread/notification counts on the tiles
Drag-and-drop reordering, persisted per user
Broaden test coverage (RTL, focus trap edge cases, keyboard variants, viewport breakpoints)

Checklist

Code is properly formatted
Sign-off message is added to all commits
Tests (unit, integration, api and/or acceptance) are included
Screenshots before/after for front-end changes (preview link)
Documentation (manuals or wiki) has been updated or is not required
Backports requested where applicable (ex: critical bugfixes)
Labels added where applicable (ex: bug/enhancement, 3. to review, feature component)
Milestone added for target branch/version (ex: 32.x for stable32)

pringelmann · 2026-05-06T08:23:04Z

+</script>
+
+<style scoped lang="scss">
+.app-item {


We can consider moving this to @nextcloud/vue in future, since this item will be used on dashboard, universal search, etc.

Would like to ship in-place for first iteration.

if planned for nextcloud-vue it would be great to use css modules instead of scoped styles for two-way isolation of styles.

pringelmann · 2026-05-06T08:24:37Z

+			// NcPopover's focus-trap only knows the slot trigger (waffle).
+			// The current-app button lives outside the slot, so we track the
+			// source and restore focus manually via setReturnFocus.
+			openedFrom: null as 'waffle' | 'currentApp' | null,


UX behaviour relevant question here. Used common sense for first iteration.

pringelmann · 2026-05-06T08:26:24Z

+				return
+			}
+
+			const cols = 4


magic number 😬 imo fine for first iteration, but some rework might be needed here.

pringelmann · 2026-05-06T08:27:07Z

+				case ' ': {
+					// Space's default scrolls the nearest scrollable ancestor (the
+					// popover); intercept and click programmatically. Enter gets
+					// the same treatment so we can close the popover uniformly.


Consistent with other waffle menus I looked at, but worth flagging as UX question

space seems a bit unexpected here rest seems fine (for accessibility)

fwiw APG recommends this behaviour:

https://www.w3.org/WAI/ARIA/apg/patterns/menubar/examples/menubar-navigation/#:~:text=activates%20the%20menu%20item%2C

My reasoning is that arrows, Home and End all trigger focus events (which will auto-scroll), making it possible for users to scroll the list without needing a dedicated key for it.

pringelmann · 2026-05-06T08:27:50Z

+		// which is dark on light themes. The header sits on the theme primary
+		// background, so override to use the matching plain-text color.
+		--color-main-text: var(--color-background-plain-text);
+		color: var(--color-background-plain-text);


Might be better to add variants to @nextcloud/vue, but imo fine for first iteration

pringelmann · 2026-05-06T08:29:42Z

+		--app-item-row-height: 64px;
+		--app-menu-rows-visible: 6;
+		padding: calc(var(--default-grid-baseline) * 3) calc(var(--default-grid-baseline) * 2);
+		display: grid;


We can debate whether grid is best/simplest solution here. Happy to iterate on this.

pringelmann · 2026-05-06T08:30:57Z

+	scrollbar-color: var(--color-scrollbar) transparent !important;
+
+	&::-webkit-scrollbar {
+		width: 6px !important;


Quick and dirty scrollbar styling. Happy to iterate on this.

susnux · 2026-05-06T10:31:08Z

+			v-if="currentApp"
+			class="app-menu__current-app"
+			type="button"
+			:aria-label="t('core', 'Open apps menu')"


so both buttons open the waffle menu?
I would expect this button to open the index of the current app instead

Yes as per design spec

This also feels like a weird interaction to me, especially since the popup anchor still points to the waffle. Would you mind expanding on what the rationale is here @kra-mo?

agree UX wise this is unexpected

This also feels like a weird interaction to me, especially since the popup anchor still points to the waffle. Would you mind expanding on what the rationale is here @kra-mo?

Since most apps that need it already provide a navigation item to go "Home", it was to make the menu more easy to access and discover.

I thought of both behaviors and this just felt "safer", even if more unconventional. Maybe I'm just being overly cautious though.

Were we to keep this, it would be good to link the two as a single button (when focused or hovered for example).

Ok yeah that makes sense. I think a single button would definitely help yes. Perhaps we go with what we have for the first step and gather some internal feedback?

artonge · 2026-05-07T10:43:11Z

Approved to be merged for the screenshots, we will address all the raised concerns in a follow-up.

schiessle · 2026-05-07T10:45:48Z

Because truncated app names are a concern raised from users every now and than with the "old menu". Does this menu adjust the column width automatically so that the app name is always completely readable (also think about translation where app names might be longer)?

kra-mo · 2026-05-07T10:57:50Z

Does this menu adjust the column width automatically so that the app name is always completely readable

The menu should generally leave more room for app names by default and it should wrap them instead of ellipsizing:

pringelmann · 2026-05-07T11:12:37Z

Does this menu adjust the column width automatically so that the app name is always completely readable

The menu should generally leave more room for app names by default and it should wrap them instead of ellipsizing:

This is how it behaves:

kra-mo · 2026-05-07T11:26:51Z

Ha, sorry, by should, I meant it does. It was a screenshot :)

kra-mo

Looks generally good as a first iteration from the design side. But apps should open on the same page as previously mentioned (I'm not sure if that has been changed already, I can't test it besides the preview page).

Issues I saw on the demo:

The + icon seems to be missing?

When opening the menu from the app name button, it is left in this state after closing it:

And a small nit:

It would be good if the padding of the container was consistent all-around and instead, the top row had increased top padding. This way, the hover/focus effect would be concentric(-ish) with the outside container :)

kra-mo

Ah, and my previous comment about the colors in dark mode: #59888 (comment)

pringelmann · 2026-05-07T11:34:48Z

Looks generally good as a first iteration from the design side. But apps should open on the same page as previously mentioned (I'm not sure if that has been changed already, I can't test it besides the preview page).

Issues I saw on the demo:

The + icon seems to be missing?

When opening the menu from the app name button, it is left in this state after closing it:

And a small nit:

It would be good if the padding of the container was consistent all-around and instead, the top row had increased top padding. This way, the hover/focus effect would be concentric(-ish) with the outside container :)

Fixed already: (you might need to do a hard refresh)'

Missing + icon
Lingering white button focus state
Links open in same tab

Will look into padding issue

Will be done in a follow-up

- Popover grid replaces the old hamburger overlay - Roving tabindex keyboard nav (arrow keys, Home/End, Enter/Space) - Focus returns to whichever trigger opened the popover - RTL-aware horizontal alignment - Admin-only "More apps" tile - Unit + Cypress coverage Resolves: #59888 Signed-off-by: Peter Ringelmann <peter.ringelmann@nextcloud.com>

-e Signed-off-by: Peter Ringelmann <peter.ringelmann@nextcloud.com>

…cher Signed-off-by: Peter Ringelmann <peter.ringelmann@nextcloud.com>

artonge · 2026-05-07T19:50:24Z

CI failure unrelated

pringelmann self-assigned this May 6, 2026

pringelmann commented May 6, 2026

View reviewed changes

Comment thread core/src/components/AppItem.vue Outdated

pringelmann commented May 6, 2026

View reviewed changes

pringelmann added 3. to review Waiting for reviews enhancement design Design, UI, UX, etc. labels May 6, 2026

pringelmann added this to the Nextcloud 34 milestone May 6, 2026

pringelmann added this to 🖍 Design team May 6, 2026

pringelmann marked this pull request as ready for review May 6, 2026 08:33

pringelmann requested a review from a team as a code owner May 6, 2026 08:34

pringelmann requested review from ShGKme, artonge, kra-mo, nfebe, sorbaugh and susnux and removed request for a team May 6, 2026 08:34

susnux reviewed May 6, 2026

View reviewed changes

Comment thread core/src/components/AppItem.vue Outdated

susnux reviewed May 6, 2026

View reviewed changes

pringelmann force-pushed the feat/59888/waffle-menu branch from f177035 to c115c2f Compare May 7, 2026 09:49

artonge approved these changes May 7, 2026

View reviewed changes

backportbot Bot added the backport-request label May 7, 2026

pringelmann force-pushed the feat/59888/waffle-menu branch from 528fedd to 459eb89 Compare May 7, 2026 11:11

kra-mo previously requested changes May 7, 2026

View reviewed changes

kra-mo reviewed May 7, 2026

View reviewed changes

nextcloud deleted a comment from backportbot Bot May 7, 2026

artonge mentioned this pull request May 7, 2026

34.0.0 beta 4 #60216

Open

pringelmann force-pushed the feat/59888/waffle-menu branch from 459eb89 to 2319472 Compare May 7, 2026 12:53

jancborchardt approved these changes May 7, 2026

View reviewed changes

jancborchardt moved this to 🏗️ At engineering in 🖍 Design team May 7, 2026

pringelmann added 11 commits May 7, 2026 19:25

fix: stylelint issue

78e98bb

-e Signed-off-by: Peter Ringelmann <peter.ringelmann@nextcloud.com>

fix: remove new tab links

7ec7eb8

-e Signed-off-by: Peter Ringelmann <peter.ringelmann@nextcloud.com>

feat: add app store link for non-admins

8e5d02b

-e Signed-off-by: Peter Ringelmann <peter.ringelmann@nextcloud.com>

feat: only app store link opens in new tab

f895e77

-e Signed-off-by: Peter Ringelmann <peter.ringelmann@nextcloud.com>

refactor(AppItem): drop redundant boolean prop defaults

041dd9f

-e Signed-off-by: Peter Ringelmann <peter.ringelmann@nextcloud.com>

fix: minor styling issues

55f9a87

-e Signed-off-by: Peter Ringelmann <peter.ringelmann@nextcloud.com>

chore: rebuild assets

16190be

-e Signed-off-by: Peter Ringelmann <peter.ringelmann@nextcloud.com>

fix: unit test

fa20120

-e Signed-off-by: Peter Ringelmann <peter.ringelmann@nextcloud.com>

chore: rebuild assets

831989b

-e Signed-off-by: Peter Ringelmann <peter.ringelmann@nextcloud.com>

fix(cypress): adapt NavigationHeader and theming specs to waffle laun…

c36d64d

…cher Signed-off-by: Peter Ringelmann <peter.ringelmann@nextcloud.com>

pringelmann force-pushed the feat/59888/waffle-menu branch from d2c9166 to c36d64d Compare May 7, 2026 17:25

artonge merged commit f501b44 into master May 7, 2026
312 of 352 checks passed

artonge deleted the feat/59888/waffle-menu branch May 7, 2026 19:50

github-project-automation Bot moved this from 🏗️ At engineering to 🎉 Done in 🖍 Design team May 7, 2026

AndyScherzinger removed the backport-request label May 7, 2026

Uh oh!

Conversation

pringelmann commented May 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

TODO

Checklist

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

artonge commented May 7, 2026

Uh oh!

schiessle commented May 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

kra-mo commented May 7, 2026

Uh oh!

pringelmann commented May 7, 2026

Uh oh!

kra-mo commented May 7, 2026

Uh oh!

kra-mo left a comment

Choose a reason for hiding this comment

Uh oh!

kra-mo left a comment

Choose a reason for hiding this comment

Uh oh!

pringelmann commented May 7, 2026

Uh oh!

artonge commented May 7, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

pringelmann commented May 6, 2026 •

edited

Loading

schiessle commented May 7, 2026 •

edited

Loading